<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>人事管理</el-breadcrumb-item>
      <el-breadcrumb-item>员工列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input placeholder="请输入姓名" clearable v-model="userName" @clear="getUserList">
            <el-button slot="append" icon="el-icon-search" @click="getUserList"></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="addEmployee">添加员工</el-button>
        </el-col>
      </el-row>

      <el-table :data="empList"   border stripe>

        <el-table-column fixed="left" label="工号" prop="empCode"></el-table-column>
        <el-table-column label="姓名" fixed="left" prop="empName"></el-table-column>
        <af-table-column  label="部门"   prop="deptId">
          <template slot-scope="scope" >
            <span v-for="d in deptList" v-if="scope.row.deptId==d.id"  >{{d.dname}}</span>
          </template>
        </af-table-column>
        <af-table-column label="职位" prop="pId">
          <template slot-scope="scope" >
            <span v-for="j in jobList" v-if="scope.row.pId==j.id"  >{{j.pname}}</span>
          </template>
        </af-table-column>
        <af-table-column label="出生日期" prop="birth"></af-table-column>
        <af-table-column label="证件类型" prop="idType">
          <template slot-scope="scope">
            <span v-if="scope.row.idType===0" >居民身份证</span>
            <span v-if="scope.row.idType===1" >军官证</span>
            <span v-if="scope.row.idType===2" >护照"</span>
            <span v-if="scope.row.idType===3">外国身份证</span>
          </template>

        </af-table-column>
        <af-table-column label="证件号码" prop="idNum"></af-table-column>
        <af-table-column label="员工类别" prop="empType">
          <template slot-scope="scope">
            <span v-if="scope.row.empType===0">合同工</span>
            <span v-if="scope.row.empType===1">外派</span>
            <span v-if="scope.row.empType===2">实习生</span>
            <span v-if="scope.row.empType===3">计件工</span>
            <span v-if="scope.row.empType===4">服务派遣</span>
          </template>
        </af-table-column>
        <af-table-column label="在职状态" prop="jobStatus">
          <template slot-scope="scope">
            <span v-if="scope.row.empType===0">试用</span>
            <span v-if="scope.row.empType===1">在职</span>
            <span v-if="scope.row.empType===2">退休</span>
            <span v-if="scope.row.empType===3">实习</span>
            <span v-if="scope.row.empType===4">离职</span>
          </template>
        </af-table-column>
        <af-table-column label="入职日期" prop="joinTime"></af-table-column>
        <af-table-column label="性别" prop="sex">
          <template slot-scope="scope">
            <span v-text="scope.row.sex===0?'男':'女'"></span>
          </template>
        </af-table-column>
        <af-table-column label="年龄" prop="age"></af-table-column>
        <af-table-column label="累计工龄" prop="workAge"></af-table-column>
        <af-table-column label="出勤模式" prop="attendancePatterns">
          <template slot-scope="scope">
            <span v-if="scope.row.empType===0">标准工时</span>
            <span v-if="scope.row.empType===1">免刷卡</span>
            <span v-if="scope.row.empType===2">弹性工时</span>
            <span v-if="scope.row.empType===3">综合计时</span>
          </template>
        </af-table-column>
        <af-table-column label="国籍" prop="country"></af-table-column>
        <af-table-column label="学历" prop="education"></af-table-column>
        <af-table-column label="民族" prop="nation"></af-table-column>
        <af-table-column label="血型" prop="bloodType"></af-table-column>
        <af-table-column label="婚育状况" prop="maritalStatus">
          <template slot-scope="scope">
            <span v-if="scope.row.empType===0">未婚未育</span>
            <span v-if="scope.row.empType===1">已婚已育</span>
            <span v-if="scope.row.empType===2">已婚未育</span>
          </template>
        </af-table-column>
        <af-table-column label="公司邮箱" prop="companyEmail"></af-table-column>
        <af-table-column label="个人邮箱" prop="personalEmail"></af-table-column>
        <af-table-column label="个人手机" prop="personalPhone"></af-table-column>
        <af-table-column label="个人微信" prop="personalWechat"></af-table-column>
        <af-table-column label="政治面貌" prop="politicsStatus"></af-table-column>
        <af-table-column label="工作城市" prop="jobCity"></af-table-column>
        <af-table-column label="户口性质" prop="category"></af-table-column>
        <af-table-column label="籍贯" prop="origo"></af-table-column>
        <af-table-column label="户籍地址" prop="addressOrigo"></af-table-column>
        <af-table-column label="户籍邮编" prop="postcodeOrigo"></af-table-column>
        <af-table-column label="现居住地" prop="addressReside"></af-table-column>
        <af-table-column label="紧急联系人" prop="emergencyContact"></af-table-column>
        <af-table-column label="联系人电话" prop="contactPhone"></af-table-column>
        <af-table-column label="试用开始日期" prop="probationPeriodBegin"></af-table-column>
        <af-table-column label="试用期限" prop="probationPeriodEnd"></af-table-column>
        <af-table-column label="试用结束日期" prop="probationPeriodEnd"></af-table-column>
        <af-table-column label="合同开始日期" prop="contractBegin"></af-table-column>
        <af-table-column label="合同期限" prop="contractTime"></af-table-column>
        <af-table-column label="合同结束日期" prop="contractEnd"></af-table-column>
        <af-table-column label="社保账号" prop="socialSecurityAccount"></af-table-column>
        <af-table-column label="公积金账号" prop="providentFundAccount"></af-table-column>

        <af-table-column fixed="right" width="150" label="操作">
          <template slot-scope="scope">
            <router-link :to="'/editEmployee/'+scope.row.id"> <el-button type="warning" size="mini">编辑</el-button></router-link>

          </template>
        </af-table-column>
      </el-table>
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[2, 4 , 8, 16]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
      ></el-pagination>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      deptList:[],
      swflag: false,
      pageNum: 1,
      pageSize: 4,
      empList: [],
      total: 9,
      userName: "",
      jobList:[]
    };
  },
  methods: {




    //添加新的员工
    addEmployee() {
      this.$router.push("/addEmployee")
    },
    //查询员工用户
    getUserList() {
      let url = this.$HRMSUrl + "/employee/list"
      this.$axios.get(url, {
        params: {
          name: this.userName,
          currentPage: this.pageNum,
          pageSize: this.pageSize
        }
      }).then(res => {
        if (res.data.code === 200) {
          console.log(res)
          this.empList = res.data.data.list;
          this.pageNum = res.data.data.pageNum;
          this.pageSize = res.data.data.pageSize;
          this.total = res.data.data.total;
        } else {
          this.$message({
            type: "error",
            message: res.data.msg,
            duration: 1000
          })
        }
      })
    },

    searchUser() {
      this.pageNum = 1;
      this.getUserList();
    },
    handleSizeChange(newSize) {
      this.pageSize = newSize;
      this.getUserList();
    },
    handleCurrentChange(newPage) {
      this.pageNum = newPage;
      this.getUserList();
    },
    initPosition(){
      let url = this.$HRMSUrl+"position/initPosition";
      this.$axios.get(url).then(res=>{
        if (res.data.code === 200) {
          this.jobList = res.data.data;
        } else {
          this.$message({
            type: "error",
            message: res.data.msg,
            duration: 1000
          })
        }
      })
    },
    initDept(){
      let url = this.$HRMSUrl+"dept/listAllDept";
      this.$axios.get(url).then(res=>{
        if (res.data.code === 200) {
          this.deptList = res.data.data.list;
          console.log(this.deptList)
        } else {
          this.$message({
            type: "error",
            message: res.data.msg,
            duration: 1000
          })
        }
      })
    },
    reloadData() {
      this.searchUser();
      this.initDept();
      this.initPosition();
    }
  },
  created() {
    this.reloadData();
  }
};
</script>
<style lang="less" scoped>
.el-table th > .cell {
  white-space: nowrap; width: fit-content;
}
</style>